﻿$(function () {
    // cache the sliding menu
    var $menu = $("#slidingMenu");

    // the first item in the sliding menu that is selected by default
    var $selected = $menu.find('li:first');

    // this is the sliding menu item element positioned absolutely and has a
    // width of the selected/hovered item and the top is the distance 
    // from the item to the top
    var $moving = $('<li />', {
        className: 'moveOther',
        top: $selected[0].offsetTop + 'px',
        width: $selected[0].offsetWidth + 'px'
    });

    // each sliding descriptions will have the same top as the hovered
    // item in the menu
    $('#slidingMenuDesc > div').each(function (i) {
        var $this = $(this);
        $this.css('top', $menu.find('li:nth-child(' + parseInt(i + 2) + ')')[0].offsetTop + 'px');
    });

    // add the sliding div menu item back to the top when the mousing out event happens
    $menu.bind('mouseleave', function () {
        moveTo($selected, 400);
    })
			 .append($moving)
			 .find('li')
			 .not('.move')
			 .bind('mouseenter', function () {
			     var $this = $(this);
			     var offsetLeft = $this.offset().left - 25;
			     //slide in the description
			     //$('#slidingMenuDesc > div:nth-child(' + parseInt($this.index()) + ')').stop(true).animate({ 'width': offsetLeft + 'px' }, 400, 'easeOutExpo');
			     //move the absolute div to this item
			     moveTo($this, 400);
			 })
			  .bind('mouseleave', function () {
			      var $this = $(this);
			      var offsetLeft = $this.offset().left - 20;
			      //slide out the description
			      //$('#slidingMenuDesc > div:nth-child(' + parseInt($this.index()) + ')').stop(true).animate({ 'width': '0px' }, 400, 'easeOutExpo');
			  }); ;

    // moves the sliding menu item div at a specifi speed to the position of he $element
    function moveTo($elem, speed) {
        $moving.stop(true).animate({
            top: $elem[0].offsetTop + 'px',
            width: $elem[0].offsetWidth + 'px'
        }, speed, 'easeOutExpo');
    }
});
